<template>
  <div>
    <el-alert :title="number" type="info" show-icon>
    </el-alert>
    <!-- 列表 -->
    <el-table :data="listData" border style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="120" :formatter="questionTypeFn">
      </el-table-column>
      <el-table-column prop="question" label="题干" width="280">
        <template #default="{ row }">
              <div v-html="row.question"></div>
            </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template #default="{ row }">
              {{ timeFn(row.addDate) }}
            </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="80" :formatter="difficultyFn">
      </el-table-column>
      <el-table-column prop="creatorID" label="录入人" width="120" :formatter="simpleFn">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120" :formatter="publishTypeFn">
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150">
      </el-table-column>
      <el-table-column prop="chkUser" label="审题人" width="120">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="150">
        <template #default="{ row }">
              {{ publishStateFn(row) }}
            </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">预览</el-button>
          <el-button @click="showCheckDialog(scope.row)" type="text" size="small" :disabled="(scope.row.chkState===2||scope.row.chkState===1?true:false)">审核</el-button>
          <el-button @click="$router.push({path:'new/2?edit'})" type="text" size="small">修改</el-button>
          <el-button @click="ChoicePublish(scope.row.id,scope.row.publishState)" type="text" size="small">{{scope.row.publishState === 1?'下架':'上架'}}</el-button>
          <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 审核框 -->
<el-dialog
  title="题目审核"
  width="25%"
  :visible.sync="checkDialog">
  <el-radio v-model="radio" label=1>通过</el-radio>
  <el-radio v-model="radio" label=2>拒绝</el-radio>
<el-form label="活动形式" style="margin-top:20px">
    <el-input type="textarea" v-model="desc" placeholder="请输入审核意见"></el-input>
  </el-form>
  <!-- <span>这是一段信息</span> -->
  <!-- <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row> -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="checkDialog = false">取 消</el-button>
    <el-button type="primary" @click="changeCheck">确 定</el-button>
  </span>
</el-dialog>
<!-- 预览框 -->
<el-dialog width="900px" title="题目预览" @close="()=>{showDialog = false,showVideo=false}" :visible.sync="showDialog">
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              【题型】：{{questionTypeFn('','',DialogData.questionType)}}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">【编号】：{{DialogData.id}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              【难度】：{{difficultyFn('','',DialogData.difficulty)}}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">【标签】：{{DialogData.tags}}</div>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">【学科】：{{DialogData.subjectName}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              【目录】：{{DialogData.directoryName}}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">【方向】：{{DialogData.direction}}</div>
          </el-col>
        </el-row>
        <br />
        <hr />
        <div class="grid-content bg-purple">
          【题干】：
          <div style="color: blue" v-html="DialogData.question"></div>
        </div>
        <div v-if="DialogData.questionType!=='3'">
          <p>
            {{ questionTypeFn('', '', DialogData.questionType, '') }}题
            选项：（以下选中的选项为正确答案）
          </p>
          <!-- 单选框 -->
          <el-radio-group v-for="item in DialogData.options" :key="item.id" :value="item.isRight === 1 ? item.code : ''">
            <el-radio :label="item.code">{{ item.code }}: {{ item.title }}  </el-radio><br />
          </el-radio-group>
        </div>
        <hr />
        <div class="margin">
          【参考答案】：
          <el-button type="danger" @click="showVideo = !showVideo">视频答案预览</el-button>
          <div class="margin" v-if="showVideo">
            <video controls autoplay style="height: 300px;margin-top:15px">
              <source src="https://v-cdn.zjol.com.cn/277004.mp4" type="video/mp4" width="400" />
            </video>
          </div>
        </div>
        <hr />
        <div class="margin2" v-html="` 【答案解析】：${DialogData.answer}`"></div>
        <hr />
        <div class="margin">【题目备注】：{{DialogData.remarks}}</div>
        <div class="hmmm_wrapper">
          <el-button type="primary" @click="()=>{showDialog = false,showVideo=false}">关闭</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { basicsChoiceCheckAPI, basicsRemoveAPI, basicsChoicePublishAPI, basicsDetailAPI } from '@/api/hmmm/questions'
// import QuestionCheck from '@/module-hmmm/components/questions-check.vue'
import { difficulty, questionType, chkType } from '@/api/hmmm/constants.js'

export default {
  data() {
    return {
      checkDialog: false,
      showDialog: false,
      showVideo: false,
      radio: '',
      desc: '',
      id: '',
      value: '',
      DialogData: []
    }
  },
  created() {
  },
  props: {
    listData: {
      type: Array,
      default: () => {}
    },
    total: {
      type: Number,
      default: 1
    },
    simple: {
      type: Array,
      default: () => {}
    },
    tabState: {
      type: String,
      default: 'all'
    }
  },
  computed: {
    number() {
      return '数据一共 ' + this.total + ' 条'
    }

  },

  methods: {
    async handleClick(row) {
      const { data } = await basicsDetailAPI(row)
      this.DialogData = data
      this.showDialog = true
    },
    /**
     * 上架 下架
     */
    async ChoicePublish(id, publishState) {
      publishState = publishState ? 0 : 1
      const { data } = await basicsChoicePublishAPI({
        id, publishState
      })
      if (data.success) {
        // this.$emit('handleClick')
        this.$message.success('操作成功')
        this.$emit('getList')
      }
    },
    /**
     * 删除数据
     */
    async del(id) {
      const { data } = await basicsRemoveAPI({ id })
      if (data.success) {
        // this.$emit('handleClick')
        this.$message.success('删除成功')
        this.$emit('getList')
      }
    },
    /**
     * 修改审核状态 意见
     */
    async changeCheck() {
      if (!this.desc) {
        this.$message.warning('请输入审核意见')
      } else {
        const { data } = await basicsChoiceCheckAPI({
          id: this.id,
          chkState: +this.radio,
          chkRemarks: this.desc
        })
        if (data.success) {
          this.$message.success('操作成功')
          this.$emit('getList')
          this.checkDialog = false
        }
      }
    },
    /**
     * 打开审核框
     */
    showCheckDialog(row) {
      this.radio = '1'
      this.desc = row.chkRemarks
      this.id = row.id
      this.checkDialog = true
    },
    // 处理发布状态
    publishStateFn(row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      }
      return '待发布'
    },
    // 处理审核状态
    publishTypeFn(row, column, cellValue, index) {
      const obj = chkType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 处理录入人
    simpleFn(row, column, cellValue, index) {
      const obj = this.simple.find(item => item.id === +cellValue)
      return obj ? obj.username : '未知'
    },
    // 处理题型
    questionTypeFn(row, column, cellValue, index) {
      const obj = questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 处理难度
    difficultyFn(row, column, cellValue, index) {
      const obj = difficulty.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 处理时间格式
    timeFn(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style>
.el-alert {
  margin-bottom: 15px;
}
.page {
  float: right;
  margin-top: 15px;
}
.el-radio-group {
  display: block;
  margin: 15px 0;
}
.margin {
  margin: 15px 0;
}
.margin2 {
  display: flex;
  align-items: center;
}
.el-radio-group {
  display: block;
  margin: 15px 0;
}

</style>
